<template>
  <li class="dropdown notifications-menu" :class="{open:$store.state.NavBar.dropDownMenu==='notification'}">
    <a href="javascript:void(0)" class="dropdown-toggle" @click.prevent="clickNotifications">
      <i class="fa fa-bell-o"></i>
      <span class="label label-warning">{{notifications.length}}</span>
    </a>
    <ul class="dropdown-menu">
      <li class="header">你有{{notifications.length}}条提示信息</li>
      <li>
        <!-- inner menu: contains the actual data -->
        <ul class="menu">
          <Notification v-for="notification of notifications"
                        :key="notification.id"
                        :icon="notification.icon"
                        :text="notification.text"
                        :url="notification.url">
          </Notification>
        </ul>
      </li>
      <li class="footer"><a href="javascript:void(0)">查看所有</a></li>
    </ul>
  </li>
</template>

<script>
  import Notification from "./Notification.vue"
  import {SET_NAV_DROP_DOWN} from "../../store/mutationTypes"

  let notifications = [
    {id:"1", icon: "fa fa-warning text-yellow", text:"删除了5条病害", url:"javascript:void(0)"},
    {id:"2", icon: "fa fa-warning text-yellow", text:"删除了5条病害", url:"javascript:void(0)"},
    {id:"3", icon: "fa fa-warning text-yellow", text:"删除了5条病害", url:"javascript:void(0)"},
    {id:"4", icon: "fa fa-warning text-yellow", text:"删除了5条病害", url:"javascript:void(0)"},
    {id:"5", icon: "fa fa-warning text-yellow", text:"删除了5条病害", url:"javascript:void(0)"}
  ];

  export default {
    name: "Notifications",
    data() {
      return {
        isOpen: false,
        notifications
      }
    },
    methods: {
      clickNotifications() {
        this.$store.commit(SET_NAV_DROP_DOWN, this.$store.state.NavBar.dropDownMenu === "notification"?"":"notification");
      }
    },
    components: {Notification}
  }
</script>



// WEBPACK FOOTER //
// Notifications.vue?0bfa20fb
